<template>
  <div>
    羊只称重

    <div class="app-container">
      <div class="search-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="称重日期" style="width: 180px">
            <el-date-picker v-model="formInline.startDate" type="date" placeholder="开始" style="width: 180px;"
              clearable />

            <el-date-picker style="float: left;" v-model="formInline.endDate" type="date" placeholder="结束" clearable />
          </el-form-item>

          <el-form-item label="羊只耳号" style="width: 180px">
            <el-input v-model="formInline.earTag" placeholder="请输羊只耳号" />
          </el-form-item>

          <el-form-item label="称重类型" style="width: 180px">
            <el-select v-model="formInline.weighCategory" placeholder="请选择" clearable>
              <el-option v-for="item in weights" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="品种" style="width: 180px">
            <el-select v-model="formInline.variety" placeholder="请选择" clearable>
              <el-option v-for="item in varitys" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="性别" style="width: 180px">
            <el-select v-model="formInline.sheepRescissionSex" placeholder="请选择" clearable>
              <el-option label="公" :value="true" />
              <el-option label="母" :value="false" />
            </el-select>
          </el-form-item>


          <el-form-item label="称重月龄" style="width: 180px">

            <el-input v-model="formInline.startAge" placeholder="开始" /><el-input v-model="formInline.endAge"
              placeholder="结束" />

          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
            <el-button type="danger" @click="onReset">重置</el-button>
            <el-button type="success" @click="Xin()">新增</el-button>
          </el-form-item>
        </el-form>


        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="weighDate" label="称重日期">
            <template v-slot="scope">
              {{ scope.row.weighDate.substring(0, 10) }}
            </template>
          </el-table-column>

          <el-table-column prop="earTag" label="耳号" />
          <el-table-column prop="variety" label="品种">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.variety == 1">杜泊</el-tag>
              <el-tag type="success" v-if="scope.row.variety == 2">
                澳洲白
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 3">
                萨福克
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 4">杜湖</el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 5">
                杜杜湖
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 6">
                萨杜湖
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 7">澳湖</el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 8">湖羊</el-tag>

              <el-tag type="danger" v-if="scope.row.variety == 9">
                澳杜湖
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="sheepRescissionSex" label="性别">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.sheepRescissionSex == 0">
                母
              </el-tag>
              <el-tag type="success" v-else-if="scope.row.sheepRescissionSex == 1">
                公
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="weighCategory" label="称重类型">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.weighCategory == 1">
                断奶重
              </el-tag>
              <el-tag type="success" v-if="scope.row.weighCategory == 2">
                月龄重
              </el-tag>
              <el-tag type="danger" v-else-if="scope.row.weighCategory == 3">
                出生重
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="weight" label="重量" />
          <el-table-column prop="weightMonthsAge" label="称重月龄" />

          <el-table-column fixed="right" label="操作" min-width="60">
            <template #default="scope">
              <el-button type="primary" link @click="handleDelete(scope.row.breedingId)">
                删除
              </el-button>

              <el-button type="primary" link @click="Updae(scope.row)">
                修改
              </el-button>

            </template>
          </el-table-column>
        </el-table>


        <el-dialog v-model="dialogVisible" title="Tips" width="500">

          <span>称重添加</span>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="称重日期" prop="weighDate">
              <el-date-picker v-model="form.weighDate" type="date" placeholder="请选择称重日期" />
            </el-form-item>

            <el-form-item label="羊只耳号" style="width: 180px">
              <el-select v-model="form.earTag" placeholder="请选择" clearable>
                <el-option v-for="item in eartags" :key="item.sheepFileId" :label="item.earTag" :value="item.earTag" />
              </el-select>
            </el-form-item>


            <el-form-item label="称重类型" style="width: 180px">
              <el-select v-model="form.weighCategory" placeholder="请选择" clearable>
                <el-option v-for="item in weights" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="重量(公斤)">
              <el-input v-model="form.weight" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>


        <el-dialog v-model="updates" title="Tips" width="500">

          <span>称重修改</span>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="称重日期">
              <el-date-picker v-model="form.weighDate" type="date" aria-label="Pick a date" placeholder="Pick a date"
                style="width: 100%" />
            </el-form-item>

            <el-form-item label="羊只耳号" style="width: 180px">
              <el-select v-model="form.earTag" placeholder="请选择" clearable>
                <el-option v-for="item in eartags" :key="item.sheepFileId" :label="item.earTag" :value="item.earTag" />
              </el-select>
            </el-form-item>


            <el-form-item label="称重类型" style="width: 180px">
              <el-select v-model="form.weighCategory" placeholder="请选择" clearable>
                <el-option v-for="item in weights" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="重量(公斤)">
              <el-input v-model="form.weight" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="Upwd(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>



      </div>
    </div>
  </div>

  <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
    :page-sizes="[1, 2, 3, 4]" :background="true" layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
//引用
import { ref, onMounted, reactive } from "vue";
import PurchaseAPI from "@/api/Breeding/index";
import Breeding, { getBreeding, AddBreeding } from "../../../api/BreedingWeight/index";
import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
import AddSupplier from "./addSupplier.vue";
import { useRouter } from "vue-router";
import { number } from "echarts";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
onMounted(() => {
  onSubmit();
  getweightsList();
  getvaritysList();
  Eartag();
});

const formInline = reactive<getBreeding>({
  pageIndex: 1,
  pageSize: 3,
  startDate: "",
  endDate: "",
  earTag: "",
  weighCategory: null,
  variety: null,
  sheepRescissionSex: null,
  startAge: null,
  endAge: null,
});

const formEartag = reactive({
  presentState: 1,
  sheepType: 3

})


const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  onSubmit();
};
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  onSubmit();
};

//分页条件
const page = reactive({
  totalCount: 0,
  pageCount: 0,
});


const tableData = ref([]);

//显示列表
const onSubmit = () => {
  console.log(formInline);
  console.log(page);
  Breeding.getBreedingList(formInline)

    .then((res: any): any => {
      tableData.value = res.data.data;
      page.totalCount = res.data.totalCount;
      page.pageCount = res.data.pageCount;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

const eartags = ref([])
const Eartag = () => {
  console.log(formEartag);
  Breeding.EarTagLisShow(formEartag.presentState,
    formEartag.sheepType,)

    .then((res: any): any => {
      eartags.value = res.data;
      console.log(eartags.value)
    })
    .catch((err: any) => {
      console.log(err);
    });
};



const weights = ref([]);
const getweightsList = () => {
  Breeding.BreedingType()
    .then(function (res) {
      weights.value = res.data;
    })
    .catch(function (err) {
      console.log(err);
    })

};

const varitys = ref([]);
const getvaritysList = () => {
  Breeding.SheepVarity()
    .then((res: any): any => {
      varitys.value = res.data;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

const handleDelete = (breedingID: number) => {
  const form = reactive({
    breedingID: breedingID,
  });
  console.log(form);
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      Breeding.DeleteBreeding(form).then((res: any) => {
        if (res.code > 0) {
          ElMessage.success("删除成功");
          onSubmit();
        } else {
          ElMessage.error("删除失败");
          onSubmit();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};


const rules = reactive<FormRules>({
  weighDate: [
    { required: true, message: '称重日期不为空', trigger: 'blur' },
  ],
})

const form = reactive<AddBreeding>({
  breedingId: 0,
  weighDate: "2024-08-01",
  earTag: "",
  weighCategory: null,
  weight: null,
})


const dialogVisible = ref(false);
const Xin = () => {

  dialogVisible.value = true;

}


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      Breeding.AddBreeding(form)
        .then((res: any): any => {

          if (res.code > 0) {
            ElMessage.success('添加成功')

          }
          else {
            ElMessage.error('添加失败')
          }



        })

      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}




const Upwd = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      Breeding.UpdateBreeding(form)
        .then((res: any): any => {

          if (res.code > 0) {
            ElMessage.success('修改成功')

          }
          else {
            ElMessage.error('修改失败')
          }



        })

      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}




const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}



const updates = ref(false);
const Updae = (data: any) => {
  form.breedingId = data.breedingId
  form.earTag = data.earTag
  form.weighCategory = data.weighCategory
  form.weight = data.weight
  form.weighDate = data.weighDate
  updates.value = true
}



</script>
